<template>
  <!-- 商品属性 -->
  <div>
    <div class="inp">
      <span class="title">名称</span>
      <el-input
        v-model="val"
        placeholder="属性名称"
        autofocus
        style="width: 25%"
        size="small"
      ></el-input
      ><span class="title">分类</span>
      <el-select
        v-model="selVal"
        placeholder="请选择"
        size="small"
        :change="selectVal(selVal)"
      >
        <el-option
          v-for="item in option"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="select" style="margin-left: 10px"
        >查询</el-button
      >
      <el-button type="primary" @click="add">添加</el-button>
    </div>

    <!-- stripe	是否为斑马纹 table -->
    <el-table :data="tableData" border style="width: 100%" :stripe="true">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" label="属性名称"> </el-table-column>
      <el-table-column label="属性分类">
        <template v-slot="scope">
          {{ option[scope.$index] ? option[scope.$index].name : "" }}
        </template>
      </el-table-column>
      <el-table-column prop="edit" label="操作">
        <!-- 用到作用域插槽 来获取当前行的id值 -->
        <template v-slot="scope">
          <el-button
            type="primary"
            plain
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getAttribute, getAttributeDesc, getCategory } from "@/request/httpAPI";
import { Message } from "element-ui";
export default {
  data() {
    return {
      option: [], //分类列表
      tableData: [], //商品属性列表
      currentPage: 1, //当前页数，支持 .sync 修饰符
      total: 100, //总条目数
      pageSize: 10, //一页显示的条数
      header: { "X-Nideshop-Token": localStorage.getItem("token") }, //请求头
      name: "", //上传的文件字段名
      val: "", //输入框的值
      selVal: "", //下拉列表的值
      type: "", //属性分类
    };
  },
  methods: {
    // 获取分类列表
    fetchCategoryList() {
      getCategory({
        "X-Nideshop-Token": localStorage.getItem("token"),
      }).then((res) => {
        if (res.errno === 0) {
          console.log(res);
          this.option = res.data;
          this.type = res.data.name;
        }
      });
    },
    // 请求获取属性列表数据
    fetchAttributesList() {
      getAttribute({
        page: this.currentPage, //当前页码
        name: this.val, //商品名称
        size: this.pageSize, //一页显示的条数
      }).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.count;
      });
    },
    //pageSize 改变时会触发
    handleSizeChange(size) {
      // console.log("size", size);
      this.pageSize = size;
      this.fetchAttributesList();
    },
    // currentPage 改变时会触发
    handleCurrentChange(page) {
      this.currentPage = page;
      // console.log("page", page);
      this.fetchAttributesList();
    },
    //查询
    select() {
      if (this.val) {
        getAttribute({
          page: this.currentPage, //当前页码
          name: this.val, //商品名称
          size: this.pageSize, //一页显示的条数
        }).then((res) => {
          let newArr = [];
          res.data.data.forEach((e) => {
            if (e.name.indexOf(this.val) != -1) {
              newArr.push(e);
            }
          });
          this.tableData = newArr;
          this.total = newArr.length;
        });
      } else {
        Message({
          message: "搜索框的值不能为空",
          type: "error",
          duration: 1000,
        });
      }
    },
    //添加
    add() {
      this.$router.push("/addbrand");
    },
    // 编辑
    handleEdit(index, row) {
      console.log(index, row, row.id);
      getBrandDesc({
        id: row.id,
      }).then((res) => {
        if (res.errno === 0) {
          // 需要携带参数 id
          this.$router.push({ name: "editbrand", params: { id: row.id } });
        }
      });
    },
    selectVal(val) {
      console.log(val);
    }, 
  },
  created() {
    this.fetchAttributesList();
    this.fetchCategoryList();
    // console.log(this.option.data);
  },
};
</script>
 
<style lang = "less" scoped>
.inp {
  .title {
    margin: 0 10px;
    color: #666;
    font-size: 14px;
  }
}
/* 分页 */
.el-pagination {
  width: 100%;
  margin-top: 4px;
}
/deep/ .el-upload {
  margin: 20px 0;
}
/deep/ .el-input__inner {
  margin: 0 20px 10px 0;
}
</style>